<template>
    <div>
        <slot>插槽</slot>
        <image v-show="searchImage" style="width: 50px;" :src="searchImage"></image>
    </div>
</template>

<script>
const options = {
    types: [
        {
            description: 'Images',
            accept: {
                'image/png': ['.png'],
                'image/jpeg': ['.jpg', '.jpeg', '.jfif', '.pjpeg', '.pjp'],
            },
        },
        // 可以添加更多类型
    ],
    excludeAcceptAllOption: false, // 是否显示接受所有文件的选项
    multiple: false
}
export default {
    name: "ImageUploadBase64",
    props: {
      value: String
    },
    watch: {
      value: {
          handler(newVal) {
              this.searchImage = newVal;
          },
          immediate: true
      }
    },
    data() {
        return {
            searchImage: undefined
        }
    },
    methods: {
        async handleUpload() {

            const fileHandles = await window.showOpenFilePicker(options);
            for (const fileHandle of fileHandles) {
                const file = await fileHandle.getFile();
                const reader = new FileReader();
                reader.onload = e => {
                    console.log(e.target.result)
                    this.searchImage = e.target.result
                    this.$emit('input', this.searchImage)
                }
                reader.readAsDataURL(file);
            }
        }

    }
}
</script>

<style scoped>

</style>
